<template>
  <div>
    <el-button type="primary" @click="dialogTableVisible = true">添加</el-button>
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="添加" width="900px">
      <el-form ref="row_data" :model="row_data" :rules="rules" label-position="left" label-width="100px" style="width: 750px; margin-left:50px;">
{foreach $field as $key=>$value }
{if $value.input_type !=='null'}
        <el-form-item :label="'{$value['comment']}'" prop="{$value['name']}">
{if $value.input_type=='text'}
          <tinymce :height="350" v-model="row_data.{$value['name']}" style="width:700px;" />
{elseif $value.input_type=='radio'}
          <el-radio v-for="item in select_{$value['name']}" v-model="row_data.{$value['name']}" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
{elseif $value.input_type=='select'}
          <el-select v-model="row_data.{$value['name']}" placeholder="请选择{$value['comment']}">
            <el-option v-for="item in select_{$value['name']}" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
{elseif $value.input_type=='number' && false}
          <el-input-number v-model="row_data.{$value['name']}" :precision="2" :step="5" :min="0" controls-position="right"/>
{elseif $value.input_type=='int' && false}
          <el-input-number v-model="row_data.{$value['name']}" :step="5" :min="0" controls-position="right"/>
{elseif $value.input_type=='date'}
          <el-date-picker v-model="row_data.{$value['name']}" type="datetime" value-format="timestamp" placeholder="选择{$value['comment']}"/>
{elseif $value.input_type=='textarea'}
          <el-input v-model="row_data.{$value['name']}" :autosize="{ minRows: 2}" :rows="2" type="textarea" placeholder="请输入内容" />
{elseif $value.input_type=='image'}
          <el-alert title="建议图片尺寸为 宽 x 高 px" style="margin-bottom: 10px; line-height: 20px" type="success"/>
          <div class="upload_{$value['name']}">
            <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_{$value['name']}" class="avatar-uploader" action="">
              <img v-if="row_data.{$value['name']}" :src="row_data.{$value['name']}" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </div>
{else /}
          <el-input v-model="row_data.{$value['name']}" placeholder="{$value['comment']}"/>
{/if}
        </el-form-item>
{/if}
{/foreach}
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { add } from '@/api/{$model_name}/{:parse_name($table_name)}'
import store from '@/store'
{php}
$text = true;
$components_text = true;
$alioss = true;
{/php}
{foreach $field as $key=>$value}
{if $text}
{if $value.input_type === 'text'}
import Tinymce from '@/components/Tinymce'
{php}$text = false;{/php}
{/if}
{/if}

{if $alioss}
{if $value.input_type === 'image'}
import { client } from '@/utils/alioss'
{php}$alioss = false;{/php}
{/if}
{/if}
{/foreach}

export default {
  name: 'DragDialogDemo',
{foreach $field as $key=>$value}
{if $components_text}
{if $value.input_type === 'text'}
  components: { Tinymce },
{php}$components_text = false;{/php}
{/if}
{/if}
{/foreach}
  directives: { elDragDialog },
  data() {
    return {
{foreach $field as $key=>$value}
{if $value.input_type=='radio' || $value.input_type=='select'}
{php} $enum_len = count($value['enum']);{/php}
      select_{$value.name}: [{foreach $value.enum as $k=>$v}
{ value: {if $value.type=='Int' || $value.type=='TinyInt'}{$v.key}{else /}'{$v.key}'{/if}, label: '{$v.name}' }{if $k!==$enum_len-1}, {/if}
{/foreach}
],
{/if}
{/foreach}
      rules: {
{foreach $field as $key=>$value}
{if $value.name!=='id'}
        {$value.name}: [
{if $value.input_type =='date' || $value.input_type =='text'}
          { type: 'date', required: true, message: '请选择{$value.comment}', trigger: 'blur' },
{elseif $value.input_type =='int' && false}
          { type: 'integer', required: true, message: '{$value.comment}必须是整数', trigger: 'blur' },
{elseif $value.input_type =='number' && false}
          { type: 'float', required: true, message: '{$value.comment}必须是数字', trigger: 'blur' },
{elseif $value.input_type =='image'}
          { type: 'url', required: true, message: '{$value.comment}地址不正确', trigger: 'blur' },
{/if}
          { required: true, message: '{$value.comment}不能为空', trigger: 'blur' }
        ]{if $key!==count($field)-1},{/if}

{/if}
{/foreach}
      },
      dialogTableVisible: false,
      row_data: {}
    }
  },
  methods: {
{foreach $field as $key=>$value}
{php}$beforeAvatarUpload = true;{/php}
{if $value.input_type =='image'}
{if $beforeAvatarUpload}
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return (isJPG | isPNG) && isLt2M
    },
{/if}
    upload_{$value.name}(file) {
      const that = this
      const fileName = '{$model_name}-{$table_name}-{$value.name}' + file.file.uid
      client().put(fileName, file.file).then((res) => {
        this.$set(that.row_data, '{$value.name}', res.url)
        that.$message.success('{$value.comment}上传成功！')
      }).catch((err) => {
        that.$message.error('{$value.comment}上传失败，原因：' + err)
      })
    },
{/if}
{/foreach}
    submitForm() {
      this.$refs.row_data.validate(valid => {
        if (valid) {
          const data = this.row_data
{foreach $field as $key=>$value}
{if $value.input_type=='date'}
          data.{$value.name} = parseInt(data.{$value.name} / 1000)
{/if}
{/foreach}
          add(store.getters.token, data).then(res => {
            if (res.data.status) {
              this.$message.success('添加成功！')
              this.$emit('getLists')
              this.close()
            } else {
              this.$message.error('添加失败！原因：' + res.data.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>

{php}
$style = true;
{/php}
{foreach $field as $key=>$value}
{if $value.input_type == 'image'}
{if $style}
<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

{php}
$style=false;
{/php}
{/if}
  /* {$value['comment']}({$value['name']})图片上传组件的尺寸 */
  .upload_{$value['name']} .avatar-uploader-icon{
    font-size: 28px;
    min-width: 178px;
    height: 178px;
    line-height: 178px;
  }
  .upload_{$value['name']} .avatar{
    min-width: 178px;
    height: 178px;
  }
{/if}
{if $style==false && $key==(count($field)-1)}
</style>
{/if}
{/foreach}
